<template>
  <view class="detail">
    <u-cell-group>
      <u-cell title="资产名称" :value="templateDetail.assetsName" center></u-cell>
      <u-cell title="申请人" :value="templateDetail.creatUserName" center></u-cell>
      <u-cell title="原使用人" :value="templateDetail.oldUser" center></u-cell>
      <u-cell title="被转移人" :value="templateDetail.divertUserName" center></u-cell>
      <u-cell v-if="templateDetail.deposit" title="存放地" :value="templateDetail.deposit" center></u-cell>
      <u-cell title="状态" :value="templateDetail.state" center></u-cell>
      <u-cell title="备注" v-if="templateDetail.remarks" :value="templateDetail.remarks" center></u-cell>

    </u-cell-group>

    <!-- 审批记录 -->
    <u-cell-group title="审批记录">
      <view style="padding:10px;padding-bottom:100px">
        <u-steps :current="current" direction="column">
          <u-steps-item v-for="(item, index) in list.filter((x) => x.exUserName)" :key="index" :title="`${item.node}`">
            <text class="slot-icon" slot="desc">审批人：{{ item.exUserName }}</text>
            <text v-if="item.remark" class="slot-icon" slot="desc">备注：{{ item.remark }}</text>
            <!-- 1下一步 -1驳回 0取消 -->
            <text v-if="item.type != -10" :class="item.type == 1 ? 'slot-left' : 'slot-right'" slot="desc">审批状态：{{
                item.type == 1 ? '同意' : item.type == -1 ? '驳回' : '拒绝'
            }}</text>

            <text v-if="item.flowTime" class="slot-icon" slot="desc">审批时间：{{ item.flowTime }}</text>
          </u-steps-item>
        </u-steps>
      </view>
    </u-cell-group>

    <!-- 审批 -->
    <!-- 审批类型 1下一步 -1驳回 0拒绝 -->
    <view class="btn" v-if="templateDetail.exNode != '结束'">
      <!-- <u-button size="large" type="primary" text="审批" @click="btn('审批', 1)"></u-button> -->
      <u-button size="large" type="error" text="拒绝" @click="btn('拒绝', 0)"></u-button>
      <u-button v-if="templateDetail.creatUser == userInfo.userInfo.userId" size="large" type="warning" text="取消"
        @click="cancle"></u-button> <!-- 这里差一个判断，只能是申请人取消 -->
    </view>

    <!-- 审批弹框 -->
    <u-popup :show="isFlag" mode="bottom" :closeable="true" @close="isFlag = false">
      <view style="padding: 15px 10px">
        <u-form labelPosition="left" :model="model">

          <!-- <u-form-item v-if="model.type == 1 && columns.length > 0" prop="model.exUserName" borderBottom ref="item1"
            @click="show = true">
            <u--input v-model="model.exUserName" disabled disabledColor="#ffffff" placeholder="请选择审批人" border="none">
            </u--input>
            <u-icon slot="right" name="arrow-right"></u-icon>
          </u-form-item> -->
          <!-- 审批意见 -->
          <u-form-item>
            <u-textarea v-model="model.remark" placeholder="请输入审批意见"></u-textarea>
          </u-form-item>

          <u-form-item>
            <view class="foor">
              <u-button size="large" type="primary" text="确认" @click="DoEx"></u-button>
            </view>
          </u-form-item>
        </u-form>
      </view>

    </u-popup>

    <!-- 审批人 -->
    <!-- 弹框 -->
    <!-- <u-picker @confirm="confirm" @cancel="show = false" :show="show" :columns="columns" keyName="label">
    </u-picker> -->
  </view>
</template>

<script>
import uCellGroup from '../../uni_modules/uview-ui/components/u-cell-group/u-cell-group.vue'
export default {
  components: {
    uCellGroup
  },
  data() {
    return {
      objectID: '',
      templateDetail: {},
      list: [], //审批流程
      current: 0, //步骤
      isFlag: false,
      // show: false,
      // columns: [],
      model: {
        objectID: "",
        button: "",
        type: 1,
        remark: "",
        exUser: "",
        exUserName: ""
      },
      userInfo: {}
    }
  },
  onLoad(e) {
    this.objectID = e.objectID
    this.DivertGetDetils()
    this.GetExFlow()
  },
  onShow() {
    this.userInfo = uni.getStorageSync('userInfo')
  },
  methods: {
    // 详情接口
    DivertGetDetils() {
      this.$u.api.DivertGetDetils({
        objectID: this.objectID
      }).then((res) => {
        this.templateDetail = res.data
      })
    },
    // 获取审批流程
    GetExFlow() {
      this.$u.api.GetExFlow({
        objectID: this.objectID
      }).then((res) => {
        this.list = res.data
        this.current = res.data.filter((x) => x.isFlag).length
      })
    },
    // 点击审批,驳回，取消
    btn(name, type) {
      // 选人接口
      // this.GetExUser()
      this.isFlag = true
      this.model = {
        button: name,
        type: type,
      }

    },
    // 获取审批人
    // GetExUser() {
    //   this.$u.api.GetExUser({
    //     objectID: this.objectID
    //   }).then((res) => {
    //     const data = res.data.map((x) => {
    //       return {
    //         phone: x.phone,
    //         remarks: x.remarks,
    //         state: x.state,
    //         userID: x.userID,
    //         label: x.userName
    //       }
    //     })
    //     this.columns = [data]
    //   })
    // },

    // 选人
    // confirm(e) {
    //   this.model.exUserName = e.value[0].label
    //   this.model.exUser = e.value[0].userID
    //   this.show = false
    // },
    // 确定
    DoEx() {
      // if (this.model.type == 1) {
      //   if (this.columns.length > 0 && !this.model.exUserName) return this.$u.toast('请选择审批人');
      // }
      if ((this.model.type == 0 || this.model.type == -1) && !this.model.remark) return this.$u.toast('请输入备注');
      const data = {
        objectID: this.objectID,
        button: this.model.button,
        type: this.model.type,
        remark: this.model.remark,
        exUser: this.model.exUser,
        exUserName: this.model.exUserName

      }

      this.$u.api.DoEx(data).then((res) => {
        this.$u.toast('提交成功');
        this.DivertGetDetils()
        this.GetExFlow()
        this.isFlag = false
      })
    },

    // 取消
    cancle() {

      const data = {
        objectID: this.objectID,
        type: "AssetsDevert",
        isTui: true
      }
      var _this = this
      wx.showModal({
        title: '提示',
        content: '是否确定取消?',
        success(v) {
          if (v.confirm) {
            _this.$u.api.CancelEx(data).then(res => {
              if (res) {
                _this.$u.toast('取消成功');
                _this.DivertGetDetils()
                _this.GetExFlow()
              }
            })
          }
        }
      })

    }

  }
}
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #ffffff;

  /deep/.u-text__value--content.data-v-50004b49 {
    color: #323233;
    font-size: 16px !important;
    font-weight: bold !important;
  }

  /deep/.u-text__value.data-v-50004b49 {
    color: #323233;
    font-size: 16px !important;
    font-weight: bold !important;
  }

  /deep/.u-steps-item__content--column.data-v-3ae6176e {
    flex-direction: column;
    margin-left: 6px;
    line-height: 25px;
  }

  .slot-left {
    color: #3c9cff;
  }

  .slot-right {
    color: #e7605d;
  }

  .btn {
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    left: 0;
    right: 0;
  }

  .foor {
    display: flex;
    align-items: center;
  }

  /deep/radio-group {
    display: flex;
  }

  /deep/.u-popup__content.data-v-3a231fda {
    background-color: #fff;
    position: relative;
    padding: 10px;
  }
}
</style>
